<template>
	<uv-popup ref="popup" mode="center" :closeOnClickOverlay="false"
		custom-style="width:90vmin;padding:10px;textAlign:center" round="10px">
		<view class="jz_carinput_content">
			<uv-tabs :list="tabList" @change="tabChange" :current="curIndex" :line-height="0"
				:active-style="{fontWeight:'bold',transform: 'scale(1.05)',color:damTheme.color_toolbar_title}"></uv-tabs>
			<uv-scroll-list :indicator="false" class="scroll-view">
				<uv-code-input class="v-input" :space="5" :value="tempCarList[curIndex].carNumber" @change="inputChange"
					disabled-keyboard ref="vCodeInput" @finish="inputFinish" :maxlength="typeList[curIndex].inputLength"
					:focus="true"></uv-code-input>
			</uv-scroll-list>
		</view>
	</uv-popup>
	<uv-keyboard ref="keyboardCar" mode="car" :overlay="false" :disKeys="disKeys" :showConfirm="isShowConfirm"
		@change="keyboardChange" @confirm="keyboardConfirm" autoChange @changeCarInputMode="changeCarInputMode"
		@backspace="keyboardDel" @cancel="keyboardCancelClick">
		<template #abc>
			<text v-if="isABC">省份</text>
			<text v-else>ABC</text>
		</template>
	</uv-keyboard>

</template>

<script lang="ts" setup>
	import { ref, watch, } from 'vue';
	import { getTheme } from '@/dam_uni_frame/utils/DamApi';

	const damTheme = getTheme();
	const popup = ref();
	const tabList = ref([]);//tab标签
	const keyboardCar = ref();
	const vCodeInput = ref();//input输入框
	const isShowConfirm = ref(false);//是否显示确认按钮
	/**
	 * 是否编辑车牌号，此时tab切换虚清空
	 */
	// const isEditCar = ref(false)
	// const editCarIndex = ref(0)

	/**
	 * 车辆类型列表
	 */
	// const carTypeList = ref([])
	/**
	 * 编辑中的车牌内容
	 */
	const tempCarList = ref([]);

	/**
	 * 当前的车辆index项
	 */
	const curIndex = ref(0);
	const disKeys = ref();
	const isABC = ref(false);

	const props = defineProps({
		/**
		 * 默认的车牌号
		 * {type:车辆类型，carNumber:车牌号，isActive:是否是选中，此属性有且只有一个为true}
		 */
		defaultCar: {
			type: Array,
			default: [{
				type: 1,
				carNumber: '',
				isActive: true
			}, {
				type: 2,
				carNumber: ''
			}]
		},
		/**
		* 车辆类型列表
		*/
		typeList: {
			type: Array,
			default: [
				{
					name: '普通车辆',
					type: 1,
					tabIndex: 0,
					inputLength: 7
				}, {
					name: '新能源',
					type: 2,
					tabIndex: 1,
					inputLength: 8
				}
			]
		}
		// defaultCarIndex: {
		// 	type: Number,
		// 	default: -1
		// },
	});
	const disKeysFirst = ['京', '粤', '云', '甘', '宁', '津', '冀', '沪', '豫', '辽',
		'黑', '湘', '鄂', '皖', '鲁', '苏', '浙', '赣', '桂', '晋', '陕', '蒙',
		'吉', '闽', '贵', '渝', '川', '青', '琼', '挂', '藏', '港', '澳', '新', '学', '使',
	];

	const emits = defineEmits(['inputConfirm', 'popDismiss']);

	defineExpose({ showPop, dismissPop })

	watch(() => [props.defaultCar, props.typeList], (newValue, oldValue) => {
		let car = newValue[0];
		let type = newValue[1];
		initTabData(type);
		initInputData(car);
	}, { immediate: true });

	/**
	 * 初始化Tab所用的数据
	 * @param typeList
	 */
	function initTabData(typeList) {
		tabList.value = [];
		if (typeList) {
			for (var i = 0; i < typeList.length; i++) {
				let item = typeList[i];
				tabList.value.push({
					name: item.name
				});
			}
		}
	}
	/**
	 * 初始化Input所用的数据
	 * @param  carList
	 */
	function initInputData(carList) {
		tempCarList.value = [];
		if (carList && carList.length > 0) {
			for (var i = 0; i < carList.length; i++) {
				let item = carList[i];
				tempCarList.value.push({
					type: item.type,
					carNumber: item.carNumber,
					isActive: item.isActive
				});
				if (item.isActive) {
					if (item.carNumber.length == props.typeList[i].inputLength) {
						isShowConfirm.value = true;
					}
					curIndex.value = i;
				}
			}
		} else {
			for (var i = 0; i < props.typeList.length; i++) {
				let tab = props.typeList[i];
				tempCarList.value.push({
					type: tab.type,
					carNumber: '',
					isActive: i == 0
				});
			}
			curIndex.value = 0;
		}
	}

	/**
	 * tab切换
	 * @param e
	 */
	function tabChange(e) {
		let index = e.index;
		curIndex.value = index;
	}

	/**
	 * 输入完成
	 * @param e
	 */
	function inputFinish(e) {
		isShowConfirm.value = true;
	}

	/**
	 * 输入变化
	 * @param e
	 */
	function inputChange(e) {
		if (props.typeList && props.typeList.length > curIndex.value) {
			if (e.length < props.typeList[curIndex.value].inputLength) {
				isShowConfirm.value = false;
			}
		}
		disKeys.value = e.length == 0 ? [] : disKeysFirst;
		if (e.length == 0) {
			keyboardCar.value.changeCarMode();
			isABC.value = false;
		} else {
			isABC.value = true;
		}
	}

	/**
	 * 键盘点击事件
	 * @param  e
	 */
	function keyboardChange(e) {
		//TODO xiugai isABC
		if (tempCarList.value && tempCarList.value.length > curIndex.value) {
			let item = tempCarList.value[curIndex.value];
			if (props.typeList[curIndex.value].inputLength > item.carNumber.length) {
				item.carNumber += e;
			}
		}
	}

	/**
	 * 取消
	 */
	function keyboardCancelClick() {
		dismissPop();
		resetData();
	}

	/**
	 * 点击确认
	 */
	function keyboardConfirm() {
		dismissPop();
		emits('inputConfirm', tempCarList.value)
	}
	//省份和ABC切换
	function changeCarInputMode(e) {
		isABC.value = e
	}
	function keyboardDel() {
		if (tempCarList.value && tempCarList.value.length > curIndex.value) {
			let item = tempCarList.value[curIndex.value];
			if (item.carNumber.length > 0) {
				item.carNumber = item.carNumber.slice(0, -1)
			}
		}
	}

	/**
	 * 重置数据
	 */
	function resetData() {
		initTabData(props.typeList);
		initInputData(props.defaultCar);
	}

	function showPop() {
		popup.value.open();
		keyboardCar.value.open();
	}
	function dismissPop() {
		keyboardCar.value.close();
		popup.value.close();
		emits('popDismiss')
	}
</script>

<style lang="scss">
	@import "/dam_uni_frame/styles/dam_theme_common.scss";

	.jz_carinput_content {
		padding: 0 $dam-margin1;
		box-sizing: border-box;
	}

	// .submit-item {
	// 	// justify-content: space-between;
	// 	width: 100%;
	// 	justify-content: space-between;

	// 	.submit-btn {
	// 		// line-height: $dam-btn-height_normal;
	// 		border: 1px solid v-bind('damTheme.color_btn_bg_theme');
	// 		color: v-bind('damTheme.color_btn_bg_theme');
	// 		// background-color: v-bind('damTheme.color_btn');
	// 	}

	// 	.cancel-btn {
	// 		// line-height: $dam-btn-height_normal;
	// 		border: 1px solid v-bind('damTheme.color_bg_gray');
	// 		margin-right: $dam-margin3;
	// 		// background-color: v-bind('damTheme.color_btn');
	// 	}
	// }

	.scroll-view {
		overflow-x: auto;
		white-space: nowrap;
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
	}

	// .v-input {
	// 	padding: $dam-margin2 0;

	// }
</style>